<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<div class="panel panel-primary filterable" id="mainPanel">
	<div class="panel-heading">
		<h3 class="panel-title">Szablony ankiet</h3>
	</div>
	<table class="table table-hover">
		<thead>
			<tr class="filters">
				<th><input type="text" class="form-control" placeholder="Nazwa szablonu"></th>
				<th><input type="text" class="form-control" placeholder="Kod kursu"></th>
				<th><input type="text" class="form-control" placeholder="Nazwa kursu"></th>
				<th><input type="text" class="form-control" placeholder="Rok akademicki"></th>
				<th><input type="text" class="form-control" placeholder="Semestr"></th>
				<th><input type="text" class="form-control" placeholder="Prowadzący"></th>
			</tr>
		</thead>
		<tbody>

			<c:forEach items="${elementplanu}" var="el">
				<tr class="pytanierow" data-szablon="${el.szablon.id}">
					<td>${el.szablon.nazwa}</td>
					<td>${el.kurs.kod}</td>
					<td>${el.kurs.nazwa}</td>
					<td>${el.planAnkietyzacji.rok}</td>
					<td>${el.planAnkietyzacji.semestr}</td>
					<td>${el.kurs.nazwiskoProwadzacego}</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
</div>

<div id="errorMsg"></div>

<c:forEach items="${szablony}" var="szablon">
	<div class="panel-group pytania" id="accordion2" role="tablist" aria-multiselectable="true" data-szablon_id="${szablon.id}">
		<div style="padding-bottom: 4px">
	<h4><span class="label label-primary" style="padding: 8px">Lista pytań otwarte dla szablonu ankiety ${szablon.nazwa}:</span></h4>
</div>
		<c:forEach items="${szablon.pytaniaOtwarte}" var="pytanie">
			<div class="panel panel-default collapse-pytanie">
				<div class="panel-heading" role="tab" id="heading${pytanie.pytanieOtwarte.id}">
					<div class="row">
						<div class="col-md-9">
							<h4 class="panel-title">${pytanie.pytanieOtwarte.tresc}
								<a data-toggle="collapse" data-parent="#accordion2" href="#collapse${pytanie.pytanieOtwarte.id}" aria-expanded="true" aria-controls="collapse${pytanie.pytanieOtwarte.id}">
								</a>
							</h4>
						</div>
						<div class="col-md-3">
							<h4 class="panel-title" align="right">
								<a data-toggle="collapse" data-parent="#accordion2" href="#collapse${pytanie.pytanieOtwarte.id}" aria-expanded="true" aria-controls="collapse${pytanie.pytanieOtwarte.id}">
									słowa kluczowe
									<span class="glyphicon glyphicon-collapse-down" aria-hidden="true"></span>
								</a>
							</h4>
						</div>
					</div>
				</div>
				<div id="collapse${pytanie.pytanieOtwarte.id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading${pytanie.pytanieOtwarte.id}">
					<div id="skp${pytanie.pytanieOtwarte.id}">
						<c:forEach items="${pytanie.pytanieOtwarte.slowoKluczowes}" var="sk">
							<div class="panel-body">
								<div class="row">
									<div class="col-md-10">${sk.slowoKluczowe.nazwa}</div>
									<div class="col-md-2" align="right">
										<a href="javascript:;" onclick="removeSkFromPytanie(${sk.slowoKluczowe.id},${pytanie.pytanieOtwarte.id});"> <span
											class="glyphicon glyphicon-remove removeSK"></span>
										</a>
									</div>
								</div>
							</div>
						</c:forEach>
					</div>
					<div class="panel-body">
						<a id="addSK" class="btn btn-primary pull-right" data-toggle="modal" data-target="#popupAddSK${pytanie.pytanieOtwarte.id}" aria-hidden="true">Dodaj słowo
							kluczowe</a>
					</div>
				</div>
			</div>

			<div class="modal fade" id="popupAddSK${pytanie.pytanieOtwarte.id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span aria-hidden="true">&times;</span><span class="sr-only">Anuluj</span>
							</button>
							<h4>Słowo kluczowe:</h4>
							<input id="newSkId${pytanie.pytanieOtwarte.id}" type="hidden" name="newSkId" /> <input type="hidden" name="pId" value="${pytanie.pytanieOtwarte.id}" />
							<div class="btn-group">
								<a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Wybierz słowo kluczowe<span class="caret"></span></a>
								<ul class="dropdown-menu">
									<c:forEach items="${slowakluczowe}" var="sk">
										<li><a data-value="${sk.id}" data-id="${pytanie.pytanieOtwarte.id}">${sk.nazwa}</a></li>
									</c:forEach>
								</ul>
							</div>

							<span class="input-group-btn"> <input type="submit" id="save" value="Zapisz" class="btn btn-primary pull-right" data-dismiss="modal"
								onclick="dodajSkDoPytania(${pytanie.pytanieOtwarte.id});" />
							</span>
						</div>
					</div>
				</div>
			</div>
		</c:forEach>


	</div>
</c:forEach>


<script type="text/javascript">

function dodajSkDoPytania(p){
	console.log('x ' +  $('#newSkId' + p).val());
	var requestData = {newSkId: $('#newSkId' + p).val(), pId: p};
	$.getJSON("/projekt-ankieta/szablony/dodajskdopytania.html", requestData, function(data) {

		if(data == 'error') {
			console.log('ERROR');
			
			var html = "<div class='alert alert-danger alert-dismissible fade in' role='alert' id='errorBox'>" + 
			"<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button>" +
			"<p>Wybrane słowo kluczowe jest już dodane</p></div>";
			
			$('#errorMsg').append(html);
		} else {
			var html = "<div class='panel-body'>";
			html += "<div class='row'>";
			html += "<div class='col-md-10'>" + data.nazwa + "</div>";
			html += "<div class='col-md-2' align='right'>";
			html += "<a href='javascript:;' onclick='removeSkFromPytanie(" + data.id + "," + p + ");'> <span class='glyphicon glyphicon-remove removeSK'></span></a>";
			html += "</div></div></div>";
			
			$('#skp' + p).append(html);
			
			$(".removeSK").click(function(event) {
				event.preventDefault()
				
				$(this).parent().parent().parent().parent().hide();
			
			});
		}
				
});
	
};

	function removeSkFromPytanie(sk, p) {
		console.log(sk + " " + p);
		console.log($(this));
		var requestData = {skId: sk, pId: p};
		$.get("/projekt-ankieta/szablony/usunskp.html", requestData, function(data) {
				console.log(data);
		});
	}
	
	$(".removeSK").click(function(event) {
		event.preventDefault()
		$(this).parent().parent().parent().parent().hide();
	});

	$(".pytanierow").click(function() {
		var szablonId = $(this).attr('data-szablon');
		$('.pytania').hide();
		$('div[data-szablon_id="' + szablonId + '"]').show();

	});
	
	

	$(".dropdown-menu li a")
			.click(
					function() {
						var selText = $(this).text();
						$(this).parents('.btn-group').find('.dropdown-toggle')
								.html(selText + ' <span class="caret"></span>');						
						$('#newSkId' + $(this).attr('data-id')).val(
								$(this).attr('data-value'));

					});

	$(document)
			.ready(
					function() {
						
						$('#errorBox').hide();
						$('.pytania').hide();

						$('.filterable .filters input')
								.keyup(
										function(e) {

											/* Useful DOM data and selectors */
											var $input = $(this), inputContent = $input
													.val().toLowerCase(), $panel = $input
													.parents('.filterable'), column = $panel
													.find('.filters th')
													.index($input.parents('th')), $table = $panel
													.find('.table'), $rows = $table
													.find('tbody tr');

											/* Dirtiest filter function ever ;) */
											var $filteredRows = $rows
													.filter(function() {
														var value = $(this)
																.find('td').eq(
																		column)
																.text()
																.toLowerCase();
														return value
																.indexOf(inputContent) === -1;
													});
											/* Clean previous no-result if exist */
											$table.find('tbody .no-result')
													.remove();
											/* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
											$rows.show();
											$filteredRows.hide();
											/* Prepend no-result row if all rows are filtered */
											if ($filteredRows.length === $rows.length) {
												$table
														.find('tbody')
														.prepend(
																$('<tr class="no-result text-center"><td colspan="'
																		+ $table
																				.find('.filters th').length
																		+ '">Brak ankiet</td></tr>'));
											}
										});
					});
</script>







